import { useState, useRef, useContext, useEffect } from 'react';
import { Tabs } from 'antd';
import { TabsProps } from 'antd';
import RadioSettings from './RadioSettings';
import SsidSettings from './SsidSettings';
import GroupSettings from './GroupSettings';
import {
    ProForm,
    ProFormInstance
} from '@ant-design/pro-components';
import { wifiDefaultValues } from './data';
import './index'
import { http_request, ac_cgi_url } from '@src/Common/Request';
import { AllContext,AllContextProvider} from '@src/Common/AllContext';


export default (props: any) => {
    const { devType, setIsReload,groupActionDrawer, group, closeDrawer,messageApi, groupValues } = useContext(AllContext) as any;
    const formRef = useRef<ProFormInstance>();
    const [wifiTabKey, setWifiTabKey] = useState<string>('group');
    const baseContext = useContext(AllContext);
    
    const CreateSsidSettingsInstance = (key: string) => {
        const newAllContext = { ...baseContext, wifiTabKey: key, formRef: formRef };
        return (
            <AllContextProvider value={newAllContext}>
                <SsidSettings />
            </AllContextProvider>
        );
    };

    const onChange = (key: string) => {
        setWifiTabKey(key);
    };

    const onFinish = async (values: any) => {
        let request_method = 'POST';
            values.group.devType = devType;
        if (groupActionDrawer === 'edit') {
            request_method = 'PATCH';
            // update group values alony
            group.groupName = values.group.groupName;

            // update group
            values.group = group;
        }
        http_request(
            ac_cgi_url,
            values,
            request_method,
            {},
        ).then(responseObject => {
            if (!responseObject.success) {
                messageApi.warning(responseObject.msg);
            }else{
                messageApi.success(responseObject.msg);
            }
            setIsReload(true);
            closeDrawer(false);
            return responseObject.data;
        });
    };

    const items: TabsProps['items'] = [
        {
            key: 'group',
            label: '分组设置',
            children: <GroupSettings />,
            forceRender: true,
        },
        {
            key: 'radio',
            label: '射频设置',
            children: <RadioSettings />,
            forceRender: true,
        },
        {
            key: 'ssid2_4',
            label: 'WiFi-2.4G',
            children: CreateSsidSettingsInstance('ssid2_4'),
            forceRender: true,
        },
        {
            key: 'ssid5_8',
            label: 'WiFi-5.8G',
            children: CreateSsidSettingsInstance('ssid5_8'),
            forceRender: true,
        },
    ];

    useEffect(() => {
        if (groupActionDrawer === 'edit') {
            formRef.current?.setFieldsValue(groupValues);
        }
    }, [groupValues]);

    return (
        <div style={{ 
            position: 'relative',
            maxHeight: 'calc(100vh - 10px)',
            paddingBottom: 64,
            overflowY: 'hidden'
        }}>
            <ProForm
                className='ProForm'
                onFinish={onFinish}
                size='small'
                layout="horizontal"
                colon={false}
                initialValues={wifiDefaultValues}
                formRef={formRef}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                submitter={{
                    render: (props, doms) => [
                        <div 
                            style={{
                                position: 'relative',
                                borderTop: '1px solid #e9e9e9',
                                padding: '16px 24px',
                                background: '#fafafa',
                                textAlign: 'right',
                                boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.1)',
                                borderRadius: '0 0 4px 4px',
                                marginTop: '16px'
                            }}
                            key="footer"
                        >
                            {doms}
                        </div>
                    ],
                    resetButtonProps: { style: { marginRight: 8 } },
                    submitButtonProps: { type: 'primary' },
                    searchConfig: { submitText: '提交', resetText: '重置' },
                }}
            >
                <div style={{ 
                    // height: 'calc(100vh - 180px)', 
                    // overflowY: 'auto',
                    // paddingRight: 8 
                }}>
                    <Tabs defaultActiveKey="group" items={items} onChange={onChange} />
                </div>
            </ProForm>
        </div>
    );

}
